feat(app): Update Runs page visuals to new layout and card design #27770

dkasper-was-taken · 2023-09-08T01:14:32Z

Closes Update Runs page Cards to new design #27203

Additional details

Introduce RunsLayout for RunsContainer
- Git layout grouped by sha
- w/o Git layout single group
Update RunCard to
- New breakpoint responsive design
- Add Debug button that navigates to run on debug page
Increase Latest Run count from 10 -> 100
Fix showDebugForCloudRun return type, should be boolean as it's navigational and no query data is returned

Steps to test

Launch Cypress with associated cloud run
Verify latest run status matches icon

How has the user experience changed?

PR Tasks

Have tests been added/updated?
[n/a] Has a PR for user-facing changes been opened in cypress-documentation?
[n/a] Have API changes been updated in the type definitions?

# Conflicts: # cli/CHANGELOG.md

astone123

Looks really good! I left a few minor comments. The only one that I think really needs fixing is the "View runs in Cypress Cloud" button.

packages/app/src/runs/RunsLayout.vue

packages/app/src/runs/RunsLayout.cy.tsx

packages/app/src/runs/RunsLayout.vue

astone123

thanks for addressing my comments ✅

warrensplayer

Created a PR (#27798) with changes to consider. Please take a look and validate if they make sense to include or not.

I wish there was a better way to accomplish the complexity with when and where the flaky badge is shown. Potentially pulling that part out of the RunResults component and making it a separate component would help, but not going to ask for that now.

Overall, the changes are great! I just feel like there is no reason to truncate the branch name and duration/time ago information at the larger breakpoints when there will always be plenty of room.

The only other request I have is to write tests to validate the tooltip for the RunTags to validate they contain the right information at the different breakpoints.

warrensplayer · 2023-09-13T13:13:08Z

One other thing that was not called out on the original issue but is in the designs is the updated "skeleton" loading states for the page. There are two versions (with and without git info). They are here:

dkasper-was-taken · 2023-09-13T21:32:38Z

One other thing that was not called out on the original issue but is in the designs is the updated "skeleton" loading states for the page. There are two versions (with and without git info). They are here:

https://www.figma.com/file/90FM8BU3k1HgsjOiDovpnn/In-App-Run-Notifications?type=design&node-id=1284-203425&mode=dev

https://www.figma.com/file/90FM8BU3k1HgsjOiDovpnn/In-App-Run-Notifications?type=design&node-id=1284-204709&mode=dev

Updated with new skeletons.

dkasper-was-taken · 2023-09-13T21:33:43Z

Created a PR (#27798) with changes to consider. Please take a look and validate if they make sense to include or not.

I wish there was a better way to accomplish the complexity with when and where the flaky badge is shown. Potentially pulling that part out of the RunResults component and making it a separate component would help, but not going to ask for that now.

Overall, the changes are great! I just feel like there is no reason to truncate the branch name and duration/time ago information at the larger breakpoints when there will always be plenty of room.

The only other request I have is to write tests to validate the tooltip for the RunTags to validate they contain the right information at the different breakpoints.

Added tooltip tests, merged changes down, looks solid!

warrensplayer

Skeletons worked out great. Left some suggestions for small improvements.

The tests for the tooltips on the RunTagCount allowed me to better see the styling there. Added some suggestions to get it to better match the designs.

packages/app/src/runs/RunsSkeletonRow.vue

packages/app/src/runs/RunsSkeleton.vue

packages/app/src/runs/RunTagCount.vue

Co-authored-by: Stokes Player <stokes@cypress.io>

cypress-bot · 2023-09-27T16:28:19Z

Released in 13.3.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v13.3.0, please open a new issue.

dkasper-was-taken added 30 commits August 30, 2023 18:21

basic card visuals, working on click

1fcee59

visual tweaks and i18n

7321ae0

match other i18n

5f6e2fa

redo duration format, should make common too

863c503

basic debug, needs validation of relevant run

136fa35

refactor and move files

dd754bd

working top level state

40eaf64

working grouping, needs subcomponent

7e49d7b

switch click target

b537de7

remove dayjs change

d076c5d

fix current commit

82b2c2c

revise commit for message

0daae92

working view runs button

eccddec

fix type check

b8523c5

fix tests

36941f4

fix integration tests

913d9c5

remove old test

85920a3

add layout

21197ff

add component test for new layout and cleanup

09dedd5

add count check

5a7c192

standardize cy tags

528fb18

revise count test

22884c3

fix typos

c8ef784

fix padding

bb54d37

Merge branch 'develop' into dkasper/app/runs-page-visuals

e0636ea

start wrapping

e51180f

happy wrap, next trunc

3a98076

responsive if wonky

9160db6

clean up and titles

8dbc156

Merge branch 'develop' into dkasper/app/runs-page-visuals

a1e4924

dkasper-was-taken added 2 commits September 11, 2023 19:44

match design truncate position

091795e

Merge branch 'develop' into dkasper/app/runs-page-visuals

cc113f4

# Conflicts: # cli/CHANGELOG.md

astone123 requested changes Sep 12, 2023

View reviewed changes

packages/app/src/runs/RunsLayout.vue Show resolved Hide resolved

packages/app/src/runs/RunsLayout.cy.tsx Outdated Show resolved Hide resolved

packages/app/src/runs/RunsLayout.vue Outdated Show resolved Hide resolved

packages/app/src/runs/RunsLayout.vue Outdated Show resolved Hide resolved

adddress PR comments

e188e3f

astone123 approved these changes Sep 12, 2023

View reviewed changes

astone123 requested a review from a team September 12, 2023 17:43

warrensplayer requested changes Sep 13, 2023

View reviewed changes

warrensplayer and others added 2 commits September 13, 2023 12:38

chore:updating styles (#27798)

4764a91

add tooltip content tests and skeletons

9f9faf3

dkasper-was-taken added 2 commits September 13, 2023 16:40

clean up tooltip validation

0c41448

fix runs selector

c599126

warrensplayer reviewed Sep 14, 2023

View reviewed changes

dkasper-was-taken and others added 8 commits September 14, 2023 10:57

Update packages/app/src/runs/RunsSkeletonRow.vue

f159c07

Co-authored-by: Stokes Player <stokes@cypress.io>

Update packages/app/src/runs/RunTagCount.vue

b075591

Co-authored-by: Stokes Player <stokes@cypress.io>

Update packages/app/src/runs/RunsSkeleton.vue

fc3aa88

Co-authored-by: Stokes Player <stokes@cypress.io>

Update packages/app/src/runs/RunTagCount.vue

dd38278

Co-authored-by: Stokes Player <stokes@cypress.io>

Update packages/app/src/runs/RunsSkeleton.vue

0caeeb6

Co-authored-by: Stokes Player <stokes@cypress.io>

Update packages/app/src/runs/RunsSkeletonRow.vue

91f6e76

Co-authored-by: Stokes Player <stokes@cypress.io>

Update packages/app/src/runs/RunTagCount.vue

e18c79c

Co-authored-by: Stokes Player <stokes@cypress.io>

Update packages/app/src/runs/RunTagCount.vue

eb800fc

Co-authored-by: Stokes Player <stokes@cypress.io>

warrensplayer approved these changes Sep 14, 2023

View reviewed changes

dkasper-was-taken added 2 commits September 14, 2023 12:13

remove redundant shrink-1s

80c8c9e

more shrinks

69697d0

dkasper-was-taken merged commit 0e239bf into develop Sep 14, 2023

dkasper-was-taken deleted the dkasper/app/runs-page-visuals branch September 14, 2023 21:35

cypress-bot bot locked as resolved and limited conversation to collaborators Sep 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(app): Update Runs page visuals to new layout and card design #27770

feat(app): Update Runs page visuals to new layout and card design #27770

dkasper-was-taken commented Sep 8, 2023 •

edited

Loading

astone123 left a comment

astone123 left a comment

warrensplayer left a comment

warrensplayer commented Sep 13, 2023

dkasper-was-taken commented Sep 13, 2023

dkasper-was-taken commented Sep 13, 2023

warrensplayer left a comment

cypress-bot bot commented Sep 27, 2023

feat(app): Update Runs page visuals to new layout and card design #27770

feat(app): Update Runs page visuals to new layout and card design #27770

Conversation

dkasper-was-taken commented Sep 8, 2023 • edited Loading

Additional details

Steps to test

How has the user experience changed?

PR Tasks

astone123 left a comment

Choose a reason for hiding this comment

astone123 left a comment

Choose a reason for hiding this comment

warrensplayer left a comment

Choose a reason for hiding this comment

warrensplayer commented Sep 13, 2023

dkasper-was-taken commented Sep 13, 2023

dkasper-was-taken commented Sep 13, 2023

warrensplayer left a comment

Choose a reason for hiding this comment

cypress-bot bot commented Sep 27, 2023

dkasper-was-taken commented Sep 8, 2023 •

edited

Loading